<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- H<sub>2</sub>O = 2H<sup>+</sup> + O<sup>2-</sup> -->
        <child-component>
            <h2 slot="header">我是头部标题</h2>
            <p>我是正文</p>
            <p>我也是正文</p>
            <div slot="footer">我是底部的内容</div>
            <p>我又是正文</p>
            <p>我双是正文</p>
        </child-component>
        <hr>
        <msl>
            <template slot-scope="props">
                <div>
                    <p>2020-04-09  16:45</p>
                    <p>{{props.msg}}</p>
                </div>
            </template>
        </msl>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    // 使用父组件的数据控制子组件，父组件的作用域
                    isShow: true
                }
            },
            components: {
                'child-component': {
                    template: 
                    `
                      <div v-if="isShow">
                        <div class="header">
                           <!-- 具名插槽，具有slot属性，且值匹配的标签会显示着这里 -->
                           <slot name="header"></slot>
                        </div>
                        <div class="main">
                        <!-- 单个插槽，容纳没有name属性的标签 -->
                            <slot>777</slot>
                        </div>
                        <div class="footer">
                            <slot name="footer"></slot>
                        </div>
                       </div>
                    `,
                    data() {
                        return {
                            // 使用子组件的数据控制子组件，子组件的作用域
                            isShow: true
                        }
                    }
                },
                msl: {
                    template: 
                    `
                      <div>
                         <slot :msg="hello"></slot>
                      </div>
                    `,
                    data() {
                        return {
                            hello: 666
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>